{% extends 'querylog/base.html' %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}日志查询{% endblock %}</title>
    {% block head %}
        <link href="{% static 'admin/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
        <link href="{% static 'admin/css/bootstrap-datetimepicker.css' %}" rel="stylesheet" media="screen">
        <script type="text/javascript" src="{% static 'admin/js/jquery-1.8.3.min.js' %}" charset="UTF-8"></script>
        <script type="text/javascript" src="{% static 'admin/js/bootstrap.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'admin/js/bootstrap-datetimepicker.js' %}"
                charset="UTF-8"></script>
        <!--
        <script type="text/javascript" src="{% static 'admin/js/locales/bootstrap-datetimepicker.fr.js' %}"
                charset="UTF-8"></script>
        -->
        <script type="text/javascript" src="{% static 'admin/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"
                charset="UTF-8"></script>
    {% endblock head %}
</head>
<body>
{% block body %}
    <div class="col-lg-12" id="all">

        <div class="col-lg-4">
            <form class="form-inline" role="form" method="post"
                  enctype="multipart/form-data" accept-charset="utf-8">
                {% csrf_token %}
                <!--
                <style>
                    .form-group {
                        margin: 30px 0;
                    }

                    .form-group input {
                        margin: 10px 30px;
                    }
                </style>
                -->
                <div class="form-group" id="ip" style="position: relative;left: 100px;top: 170px;">
                    <label for="name">请选择机器ip:</label>
                    <select name="##">
                        <option value="106.14.94.183">106.14.94.183</option>
                        <option value="100.66.225.5">100.66.225.5</option>
                        <option value="100.73.18.118">100.73.18.118</option>
                        <option value="audi">其他</option>
                    </select>
                </div>
                <div class="form-group" style="position: relative;top: 200px;left: 100px">
                    <label for="name1">请输入要查询的接口:</label>
                    <input type="text" name="inter" placeholder="请输入接口">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-default">提交</button>
                </div>
                {# 日期 #}

            </form>
        </div>
        <div class="col-lg-8">
            <fieldset>
                <legend style="font-size: 20px">查询时间设定</legend>

                <div class="form-group">
                    <label for="dtp_input1" class="col-md-2 control-label">起始时间</label>
                    <div class="input-group date form_datetime col-md-5" data-date="2019-06-16T05:25:07Z"{# 默认日期:1979-09-16T05:25:07Z #}
                         data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                        <input class="form-control" size="16" type="text" value="" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input1" value=""/><br/>
                </div>
                <div class="form-group">
                    <label for="dtp_input1" class="col-md-2 control-label">结束时间</label>
                    <div class="input-group date form_datetime col-md-5" data-date="2019-06-16T05:25:07Z"{# 默认日期:1979-09-16T05:25:07Z #}
                         data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                        <input class="form-control" size="16" type="text" value="" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input1" value=""/><br/>
                </div>
                <!-- 注释 日期及时间样例
                <div class="form-group">
                    <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
                    <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy"
                         data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                        <input class="form-control" size="16" type="text" value="" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input2" value=""/><br/>
                </div>
                <div class="form-group">
                    <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
                    <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii"
                         data-link-field="dtp_input3" data-link-format="hh:ii">
                        <input class="form-control" size="16" type="text" value="" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input3" value=""/><br/>
                </div>
                -->
            </fieldset>
        </div>

    </div>

    <script type="text/javascript">
        $('.form_datetime').datetimepicker({
            language: 'zh-CN',//语言设为中文
            format: 'yyyy-mm-dd hh:00:00',//format
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1
        });
        $('.form_date').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd hh:ii:ss',
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
        $('.form_time').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd hh:ii:ss',
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 1,
            minView: 0,
            maxView: 1,
            forceParse: 0
        });
    </script>
{% endblock body %}
</body>
</html>